<script setup>
import { ref, watch } from "vue";
import "@material/web/tabs/tabs";
import "@material/web/tabs/primary-tab";
import "@material/web/tabs/secondary-tab";
import TotalGraph from "@/components/graph/TotalGraph.vue";
import CategoryGraph from "@/components/graph/CategoryGraph.vue";
import { getStat } from "@/api/record";
import DockedRangeDatePicker from "@/components/datepicker/DockedRangeDatePicker.vue";

const viewType = ref("total");
const timeType = ref("yearly");
const startTime = ref(null);
const endTime = ref(null);
const datesValue = ref(null);
const countsValue = ref(null);


async function getJson(){
  if(startTime.value == null || endTime.value == null){
    return null;
  }
  const data = await getStat(startTime.value, endTime.value, timeType.value);
  if(data == null){
    return null;
  }
  console.log(data);
  return data;
}

async function getData(){
  const allData = await getJson();
  if(allData == null){
    return null;
  }
  datesValue.value = getDates(allData);
  countsValue.value = getCounts(allData);
}

function getDates(allData){
  const length = allData.length;
  let dates = [];
  
  switch(timeType.value){
    case "daily":
      for(let i = 0; i < length; i++){
        dates[i] = `${allData[i].date[0]}年${allData[i].date[1]}月${allData[i].date[2]}日`;
      }
      break;
    case "weekly":
      for(let i = 0; i < length; i++){
        dates[i] = `${allData[i].date[0]}年-第${allData[i].date[1]}周`;
      }
      break;
    case "monthly":
      for(let i = 0; i < length; i++){
        dates[i] = `${allData[i].date[0]}年${allData[i].date[1]}月`;
      }
      break;
    case "yearly":
      for(let i = 0; i < length; i++){
        dates[i] = `${allData[i].date[0]}年`;
      }
      break;
    default:
      break;
  }
  console.log(dates);
  return dates;
}

function getCounts(allData){
  const length = allData.length;
  let counts = [];
  for(let i = 0; i < length; i++){
    counts[i] = allData[i].count;
  }
  console.log(counts);
  return counts;
}

watch(startTime, ()=>{
  getData();
});

watch(endTime, ()=>{
  getData();
});

watch(timeType, ()=>{
  getData();
  console.log(timeType.value);
});

</script>

<template>
  <div class="statistics" role="presentation">
    <md-tabs class="type" @change="viewType = $event.target.activeTab.dataset.tab">
      <md-primary-tab data-tab="total">
        <md-icon slot="icon">overview</md-icon>
        总计
      </md-primary-tab>
      <md-primary-tab data-tab="category">
        分类
        <md-icon slot="icon">category</md-icon>
      </md-primary-tab>
    </md-tabs>

    <md-tabs class="interval" @change="timeType = $event.target.activeTab.dataset.tab">
      <md-secondary-tab data-tab="yearly">
        每年
      </md-secondary-tab>

      <md-secondary-tab data-tab="monthly">
        每月
      </md-secondary-tab>

      <md-secondary-tab data-tab="weekly">
        每周
      </md-secondary-tab>

      <md-secondary-tab data-tab="daily">
        每日
      </md-secondary-tab>
    </md-tabs>

    <Transition name="graph">
      <KeepAlive>
        <TotalGraph class="graph"
          v-if="viewType == 'total'"
          :timeType="timeType"
          :date="datesValue"
          :counts="countsValue"
          >
        </TotalGraph>
      </KeepAlive>
    </Transition>
    <Transition name="graph">
      <KeepAlive>
        <CategoryGraph class="graph"
          v-if="viewType == 'category'"
          :timeType="timeType"
          v-model:date="datesValue"
          v-model:counts="countsValue"
          >
        </CategoryGraph>
      </KeepAlive>
    </Transition>
  <DockedRangeDatePicker v-model:start="startTime" v-model:end="endTime"></DockedRangeDatePicker>
  </div>
</template>

<style scoped>
.statistics {
  display: grid;
  grid-template-areas: "type" "interval" "graph";
  grid-template-rows: auto auto 1fr;
  height: 100%;
}

.statistics>.type {
  grid-area: type;
}

.statistics>.interval {
  grid-area: interval;
}

.statistics>.graph {
  grid-area: graph;
}

.graph-enter-active,
.graph-leave-active {
  transition-property: opacity;
  transition-duration: var(--md-sys-motion-duration-medium2);
  transition-timing-function: linear;
}

.graph-enter-from,
.graph-leave-to {
  opacity: 0;
}
</style>
